<template>
  <div class="certification-wrap">
    <el-row>
      <el-col :span="14" class="left">
        <div class="title">
          海博认证中心授予
          <span class="name">凯发娱乐</span>
          铂金认证
        </div>
        <div
          class="img-wrap"
          :style="{ background: `url('${$baseImgUrl}company/letter_block01.jpg')
        no-repeat center`}"
        ></div>
        <div class="index-wrap">
          <company-index
            v-for="(item, index) in indexList"
            :key="index"
            activeBarColor="#aaa"
            barColor="#ddd"
            textColor="#666"
            scoreColor="#f00"
            :barHeight="14"
            :name="item.name"
            :score="item.score"
          ></company-index>
        </div>
        <div class="score-wrap">
          <div>综合得分：</div>
          <rate
            :rate="9.5"
            :perRate="2"
            :fontSize="24"
            rateTemplate="value分"
          ></rate>
        </div>
      </el-col>
      <el-col :span="10" class="right">
        <h2>海博认证数据来源标准：</h2>
        <div class="content">
          <p>网站经营历史、是否有牌照占比30%</p>
          <p>玩家评测数据占比30%</p>
          <p>海博评测中心专家指数占比20%</p>
          <p>行业媒体和主流媒体曝光度指数占比10%</p>
          <p>保证金以及信誉指数占比10%</p>
        </div>
        <div class="detail-btn">查看详细信息>></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CompanyIndex from './Index.vue';
import Rate from '../../../components/Rate.vue';

export default {
  name: 'CompanyCertification',
  components: {
    CompanyIndex,
    Rate
  },
  data() {
    return {
      indexList: [
        { name: '网站指数', score: 9.7 },
        { name: '玩家指数', score: 8.7 },
        { name: '专家指数', score: 9.9 },
        { name: '媒体指数', score: 9.8 },
        { name: '信誉指数', score: 9.9 }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .certification-wrap {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    font-size: 16px;
    color: #666;
    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 24px;
        color: #333;
        .name {
          color: #f00;
        }
      }
      .img-wrap {
        margin: 20px;
        width: 100px;
        height: 100px;
        background-size: 100%;
      }
      .index-wrap {
        width: 100%;
        padding: 0 100px;
        .index {
          margin: 15px 0;
        }
      }
      .score-wrap {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 100px;
        justify-content: flex-start;
      }
    }
    .right {
      h2 {
        margin-top: 60px;
      }
      p {
        line-height: 34px;
        font-size: 16px;
      }
      .detail-btn {
        width: 140px;
        margin-top: 10px;
        padding: 12px 10px;
        background-color: @mainBgColor;
        border-radius: 3px;
        color: #fff;
        cursor: pointer;
        &:hover {
          background-color: @mainBgHoverColor;
        }
      }
    }
  }
</style>
